<template>
  <div :class="yqNs.b()">
    <ElSelect v-bind="$attrs">
      <template v-for="item in data">
        <template v-if="item.children">
          <ElOptionGroup :key="item.id || item.value + ''" :label="item.label + ''" :disabled="item.disabled">
            <ElOption
              v-for="subItem in item.children"
              :key="subItem.id || subItem.value + ''"
              :label="subItem.label"
              :value="subItem.value"
              :disabled="subItem.disabled"
            ></ElOption>
          </ElOptionGroup>
        </template>
        <template v-else>
          <ElOption
            :key="item.id || item.value + ''"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></ElOption>
        </template>
      </template>
    </ElSelect>
  </div>
</template>

<script setup lang="ts" name="YqSelect">
import { useNamespace, ElSelect, ElOptionGroup, ElOption } from "element-plus";
import { yqNamespace } from "@/yqSrc/bem";
import { YqSelectItem, YqSelectProps } from "./types";
import { reactive } from "vue";

const yqNs = useNamespace("select", yqNamespace);

const props = withDefaults(defineProps<YqSelectProps>(), {
  data: () => [] as YqSelectItem[]
});

const data = reactive(props.data);
// 加载数据
if (props.fetchDataConfig) {
}
</script>
<style lang="scss"></style>
